<template>
    <div class="employ">
        <pub-head isBorder="true"></pub-head>
        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <span class="blue-c" v-if="state == 1">&nbsp;企业聘证</span>
            <span class="blue-c" v-if="state == 2">&nbsp;证书挂靠</span>
        </div>

        <!-- 表单内容 -->
        <div class="employ-form flexv">
            <ul class="flexv">
                <li class="flex" v-if="state == 2">
                    <span class="employ-form-name">姓名</span>
                    <input type="text" class="flex1 tr" v-model="name" placeholder="请输入姓名">
                </li>
                <li class="flex">
                    <span class="employ-form-name">证书类型</span>
                    <input type="text" class="flex1 tr type" @click="pickType" v-model="type" placeholder="请选择证书类型" readonly>
                </li>
                <li class="flex">
                    <span class="employ-form-name">证书专业</span>
                    <input type="text" class="flex1 tr type" @click="pickCourse" v-model="course" placeholder="请选择证书专业" readonly>
                </li>
                <li class="flex">
                    <span class="employ-form-name">证书地区</span>
                    <area-select v-model="selected" size="small" type="text" :data="pca" :placeholders="['选择省份','选择城市']" class="flex1 flex jus-b"></area-select>
                </li>
                <li class="flex">
                    <span class="employ-form-name">注册情况</span>
                    <input type="text" class="flex1 tr type" @click="pickReg" v-model="register" placeholder="请选择注册情况" readonly>
                </li>
                <li class="flex">
                    <span class="employ-form-name">信息标题</span>
                    <input type="text" class="flex1 tr" v-model="title" placeholder="请输入信息标题">
                </li>
                <li class="flex" v-if="state == 1">
                    <span class="employ-form-name">公司名称</span>
                    <input type="text" class="flex1 tr" v-model="cname" placeholder="请输入公司名称">
                </li>
                <li class="flex">
                    <span class="employ-form-name">薪资待遇</span>
                    <input type="text" class="flex1 tr" v-model="money" placeholder="请输入薪资待遇">
                </li>
                <li class="flex">
                    <span class="employ-form-name">详细信息</span>
                    <input type="text" class="flex1 tr" v-model="comment" placeholder="请输入详细信息">
                </li>
            </ul>

            
            <div class="sub-btna" @click="subForms">确认提交报名信息</div>
        </div>

        <!-- 弹窗 -->
        <!-- 类型弹窗 -->
        <van-popup v-model="ztype" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择证书类型</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in types" :key="index" @click="thisType(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': selec == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 专业弹窗 -->
        <van-popup v-model="zcourse" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择证书专业</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in courses" :key="index" @click="thisCur(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': cor == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 情况弹窗 -->
        <van-popup v-model="zreg" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择注册情况</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in regs" :key="index" @click="thisReg(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': rgt == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 提交前登陆弹窗 -->
        <van-popup v-model="bfSub" :overlay="true" class="before-pop flex flexv">
            <div class="before-pop-head tc">登录建筑工程平台</div>
            <div class="before-pop-login flex flexv">
                <div class="flex before-input">
                    <input type="text" class="flex1" placeholder="请输入您的手机号" v-model="tel">
                </div>

                <div class="flex before-input">
                    <input type="text" class="before-code" placeholder="请输入验证码" v-model="code">
                    <span class="blue-c flex1 tc" v-if="unget" @click="getCode(60)">获取验证码</span>
                    <span class="blue-c flex1 tc" v-else>{{times + 'S' + ' 后重新获取'}}</span>
                </div>
            </div>
            <div class="login-btn" @click="subAll">登录</div>
        </van-popup>



        <pub-foot index="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { Toast, List } from 'vant';
import pubHead from '@/components/head';
import pubFoot from '@/components/foot';
import { pca } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import { AreaSelect } from 'vue-area-linkage';

Vue.use(Toast).use(List).use(AreaSelect)
export default {
    data(){
        return{
            state: null, // 栏目 1聘证 2挂靠
            type: null, // 证书类型
            course: null, // 证书专业
            register: null, // 注册情况
            title: null, // 信息标题
            cname: null, // 公司名称 
            name: null, // 姓名 
            money: null, // 薪资待遇
            comment: null, // 详细信息
            type_id: null, // 证书类型id
            course_id: null, // 证书专业id
            register_id: null, // 注册情况id
            types: [], // 证书类型列表
            courses: [], // 证书专业列表
            regs: [{name: '初始注册',id: 1},{name: '转注册',id: 2},{name: '两者均可',id: 3}], // 注册情况列表
            ztype: false, // 是否显示证书弹窗
            zcourse: false, // 是否显示证书专业弹窗
            zreg: false, // 是否显示注册情况
            selected: [], // 选择的地址数据
            pca: pca, // 省市区数据
            selec: -1, // 选中下标
            cor: -1, // 选中下标
            rgt: -1, // 选中下标
            bfSub: false, //显示登录弹窗？
            unget: true, //为获取验证码？
            tel: null, // 手机号
            code: null, // 验证码
            times: '60', // 倒计时
        }
    },
    created(){
        this.getData()
    },
    watch:{
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubHead,
        pubFoot,
    },
    inject: ['reload'],
    methods: {
        // 获取数据
        getData(){
            this.state = this.$route.params.id;
            Toast.loading('请稍后...')
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Infoes&a=infos', {
                params: {
                    uid: this.$store.state.user.uid
                }
            }).then(res => {
                if (res.data.code == 200) {
                    const data = res.data.data;
                    this.types = data.mac;
                    this.courses = data.ysl;
                    Toast.clear();
                } else {
                    Toast.clear();
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },
        // 证书弹窗
        pickType(){
            this.ztype = true;
        },
        // 证书弹窗
        pickCourse(){
            this.zcourse = true;
        },
        // 证书弹窗
        pickReg(){
            this.zreg = true;
        },
        // 选择证书
        thisType(index){
            this.selec = index;
            this.ztype = false;
            this.type = this.types[index].name;
            this.type_id = this.types[index].id;
        },
        // 选择专业
        thisCur(index){
            this.cor = index;
            this.zcourse = false;
            this.course = this.courses[index].name;
            this.course_id = this.courses[index].id;
        },
        // 选择情况
        thisReg(index){
            this.rgt = index;
            this.zreg = false;
            this.register = this.regs[index].name;
            this.register_id = this.regs[index].id;
        },
        // 获取验证码
        getCode(val){
            if (this.unget) {
                if (!this.tel) {
                    Toast({
                        duration: 1800,
                        message: '请输入手机号！'
                    })
                    return
                }
                if (!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)) {
                    Toast({
                        duration: 1800,
                        message: '请输入正确的手机号！'
                    })
                    return
                }
                this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=MsgCode&a=sendCode', {
                    params: {
                        mobile: this.tel
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.unget = false;
                        setInterval(() => {
                            val--;
                            this.times = val;
                            if (val <=0) {
                                this.unget = true;
                                this.times = null;
                            }
                        }, 1000)
                        Toast({
                            duration: 1800,
                            message: res.data.msg
                        })
                    } else {
                        Toast({
                            duration: 1800,
                            message: res.data.msg
                        })
                    }
                })
            } else {
                Toast({
                    duration: 1800,
                    message: '请稍后再试！'
                })
            }
        },
        // 登录弹窗
        subForms(){
            if(this.state == 2){
                if (!this.name) {
                    Toast({
                        duration: 1800,
                        message: '请输入姓名！'
                    })
                    return
                }
            }
            if (!this.type) {
                Toast({
                    duration: 1800,
                    message: '请选择证书类型！'
                })
                return
            }
            if (!this.course) {
                Toast({
                    duration: 1800,
                    message: '请选择证书专业！'
                })
                return
            }
            if (this.selected.length < 1) {
                Toast({
                    duration: 1800,
                    message: '请选择所在地区！'
                })
                return
            }
            if (!this.register) {
                Toast({
                    duration: 1800,
                    message: '请选择注册情况！'
                })
                return
            }
            if (!this.title) {
                Toast({
                    duration: 1800,
                    message: '请输入标题！'
                })
                return
            }
            if (this.state == 1) {
                if (!this.cname) {
                    Toast({
                        duration: 1800,
                        message: '请输入公司名称！'
                    })
                    return
                }
            }
            if (!this.money) {
                Toast({
                    duration: 1800,
                    message: '请输入薪资待遇！'
                })
                return
            }
            if (!this.comment) {
                Toast({
                    duration: 1800,
                    message: '请输入详细信息！'
                })
                return
            }
            this.bfSub = true;
        },
        // 提交表单
        subAll(){
            if (!this.tel) {
                Toast({
                    duration: 1800,
                    message: '请输入手机号！'
                })
                return
            }
            if (!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)) {
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return
            }
            if (!this.code) {
                Toast({
                    duration: 1800,
                    message: '请输入验证码'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Infoes&a=anchoredList', {
                params: {
                    uid: this.$store.state.user.uid, // 用户id
                    infoes_type_id: this.type_id, // 类型id
                    infoes_major_id: this.course_id, // 专业id
                    province: this.selected[0], // 省份
                    city: this.selected[1], // 城市
                    reg_name: this.register_id, // 注册情况
                    title: this.title, // 标题
                    company_name: this.cname ? this.cname : '', // 公司名称
                    money: this.money, // 薪资待遇
                    info: this.comment, // 详细信息
                    type: this.state, // 栏目 1聘证 2挂靠
                    name: this.name ? this.name : '', // 姓名
                    mobile: this.tel, // 手机号
                    code: this.code // 验证码
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.bfSub = false;
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                    setTimeout(() => {
                        this.reload()
                    },2000)
                } else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
.employ{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 头部
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        span,a {
            color: #999;
            font-weight: bold;
        }
    }
    // 背景图
    .banner {
        width: 100%;
        height: 2.8rem;
    }
    // 表单内容
    .employ-form{
        width: 100%;
        min-height: 6.72rem;
        padding: 0.3rem 0.24rem;
        font-size: 0.26rem;
        background-color: #fff;
        li {
            width: 100%;
            height: 0.65rem;
            margin-bottom: 0.15rem;
            .employ-form-name{
                width: 1.5rem;
                height: 0.65rem;
                border-radius: 0.1rem;
                line-height: 0.65rem;
                text-align: center;
                font-weight: bold;
                color: #1f78ff;
                background-color: #dcecff;
            }
            input {
                margin-left: 0.15rem;
                padding: 0 0.2rem;
                border-radius: 0.1rem;
                background-color: #f5f5f5;
            }
            .small{
                border: none;
            }
            .type{
                padding-right: 0.6rem;
                background: url('~@/assets/down-ico.png') no-repeat 96% center #f5f5f5;
                background-size: 0.24rem;
            }
        }
    }
    // 弹窗
    .area-pop{
        width: 4.9rem;
        height: 5rem;
        margin: auto;
        padding: 0.44rem;
        z-index: 10;
        border-radius: 0.2rem;
        background-color: #fff;
        .type-pop-head{
            height: 0.4rem;
            font-size: 0.34rem;
            line-height: 0.4rem;
            font-weight: bold;
            text-align: center;
            color: #333;
        }
        .type-pop-box{
            width: calc(100% - 0.84rem);
            position: absolute;
            z-index: 20;
            top: 0.84rem;
            bottom: 0.44rem;
            overflow: auto;
            .type-pop-list {
                width: 100%;
                height: 0.9rem;
                border-bottom: 1px solid #dbdbdb;
                font-size: 0.28rem;
                line-height: 0.9rem;
                color: #333;
                .point{
                    width: 0.34rem;
                    height: 0.34rem;
                    margin: auto 0;
                    border-radius: 100%;
                    border: 1px solid #999;
                }
                .on{
                    border-color: #1f78ff;
                    i{
                        width: 0.2rem;
                        height: 0.2rem;
                        border-radius: 100%;
                        background-color: #1f78ff;
                    }
                }
            }
            .type-pop-list:last-child{
                border-bottom: none;
            }
        }
    }
    // 提交弹窗
    .before-pop{
        width: 5.6rem;
        height: 4.72rem;
        margin: auto;
        padding: 0.44rem;
        border-radius: 0.2rem;
        font-size: 0.26rem;
        background-color: #fff;
        .before-pop-head{
            font-size: 0.34rem;
            font-weight: bold;
            line-height: 120%;
            color: #333;
        }
        .before-pop-login{
            margin-top: 0.6rem;
            .before-input{
                width: 4.72rem;
                height: 0.7rem;
                margin-bottom: 0.15rem;
                padding: 0 0.3rem;
                border: 1px solid #dbdbdb;
                line-height: 0.7rem;
                border-radius: 0.1rem;
            }
            .before-code{
                width: 2rem;
            }
        }
        .login-btn {
            width: 4.72rem;
            height: 0.7rem;
            margin-top: 0.1rem;
            font-size: 0.26rem;
            line-height: 0.7rem;
            text-align: center;
            color: #fff;
            border-radius: 0.1rem;
            background-color: #1f78ff;
        }
    }
    // 提交
    .sub-btna{
        width: 7rem;
        height: 0.8rem;
        margin: 0.35rem auto 0;
        border-radius: 0.1rem;
        font-size: 0.26rem;
        line-height: 0.8rem;
        text-align: center;
        color: #fff;
        background-color: #1f78ff;
    }
}
</style>
